<template>
  <div id="userLogin">
    <form id="loginMain" method="post" accept-charset="UTF-8" action="/start/user/login" target="_self">
      <div id="usernameInfo">
        <input type="text" id="loginUsername" name="email" placeholder="请输入邮箱"></input>
      </div>
      <div id="passwordInfo">
        <input type="password" id="loginPassword" name="password" placeholder="请输入密码"></input>
        <button id="seePasswordFlog">
          <span class="glyphicon glyphicon-eye-close"></span>
        </button>
      </div>
      <!--
      <div id="thirdLogin">
        <span>第三方登录：</span>
        <button id="qqLogin">
          <img src="../../assets/qq.png"></img>
        </button>
        <button id="weixinLogin">
          <img src="../../assets/weixin1.png"></img>
        </button>
      </div>
      -->
      <div id="loginOpt">
        <input type="submit" id="loginBtn" value="登录" />
      </div>
      <div id="otherOpts">
        <button id="findPasswordOpt">
          <a>忘记密码</a>
        </button>
        <button id="registerOpt">
          <router-link to="/admin/register">注册账号</router-link>
        </button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      msg: 'Welcome to Your firstCloud App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #userLogin{
    padding-bottom: 30px;
    background-color: #fff;
    max-width: 500px;
    margin: 30px auto;
    padding: 30px 0;
    border: 1px solid #ccc;
    webkit-box-shadow: 0px 3px 10px #a1a1a1;
    box-shadow: 0px 3px 10px #a1a1a1;
  }

  #loginHeader{
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #018ef9;
  }
  #loginHeader > .l-logo{
    width: 30px;
    height: 30px;
    margin-top: -8px;
    margin-right: 4px;
    line-height: 60px;
    display: inline-block;
  }
  #loginHeader > .l-title{
    line-height: 60px;
    color: #222;
    margin: 0;
    display: inline-block;
  }

  #loginMain > div{
    width: calc(100% - 60px);
    margin: 0 auto;
    color: #222;
    margin-top: 15px;
  }

  #usernameInfo, #passwordInfo{
    padding: 0 15px;
    background-color: #fff;
    text-align: left;
    border: 1px solid #ccc;
  }
  #loginUsername, #loginPassword{
    width: calc(100% - 30px);
    height: 40px;
    border: 0;
    background-color: #fff;
  }
  #loginUsername:focus, #loginPassword:focus{
    outline: 0;
  }
  #seePasswordFlog{
    background: #fff;
    border: 0;
    color: #888;
  }

  #thirdLogin{
    text-align: left;
  }
  #thirdLogin button{
    border: 0;
    background-color: rgba(0,0,0,0);
  }
  #thirdLogin button img{
    width: 40px;
    height: 40px;
  }

  #loginBtn{
    width: 100%;
    height: 40px;
    border: 0;
    background-color: #1d9af9;
    color: #222;
  }

  #otherOpts{
    text-align: right;
    line-height: 40px;
  }
  #otherOpts button{
    border: 0;
    background-color: rgba(0,0,0,0);
  }
  #otherOpts a{
    color: #222;
  }
  #findPasswordOpt{
    margin-right: 15px;
  }
</style>
